<template>
  <div>
      <div class="z-setting">
      <swiper class="swiper-container"
      :pagination="{ clickable: true }"
      :autoplay="{ autoplay: true }"
      loop>
      <swiper-slide v-for="val in list" :key="val.id"><img :src="'http://www.kymid.com/testphp/public'+ val.image" alt=""></swiper-slide>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination">

      </div>
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
      </swiper>
        <div class="z-slogan">
        <h3>Foeus on <em>OEM I ODM</em> services in smart wearabte industry</h3>
        </div>
      </div>
    <!-- <img src="@/assets/img/bg.png" alt="" />   -->
    <!-- 手环 -->
    <div class="z-content">
      <div class="w1080">
        <div class="z-cuff">
          <div class="z-cuff-fl">
            <div class="z-cuff-fl-tu" v-for="val in therr" :key="val.id">
              <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
            </div>
            <div class="z-cuff-fl-zi">
              <div class="z-zi-fl">
                <h3>i12 Smart watch</h3>
                <p>Traditional Watch appearance with modern technology .</p>
              </div>
              <div class="z-zi-fr"><router-link to="/watch2/smartwatch2">See more</router-link></div>
            </div>
          </div>
          <div class="z-cuff-fr">
            <div class="z-cuff-fr-shang">
              <div class="z-cuff-fr-tu"  v-for="val in list2" :key="val.id">
                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
              </div>
              <div class="z-cuff-fr-zi">
                <div class="z-zi-fr-fl">
                  <h2>i1 Smart bracelet</h2>
                    <p>Improve your living standard.</p>
                </div>
                <div class="z-zi-fr-fr"><router-link to="/watch2/bracelet2">See more</router-link></div>
              </div>
            </div>
            <div class="z-cuff-fr-xia">
              <div class="z-cuff-fr-xia-tu"  v-for="val in list3" :key="val.id">
                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
              </div>
              <div class="z-cuff-fr-xia-zi">
                <div class="z-zi-fr-xia-fl">
                  <h2>About Us</h2>
                   <p>Take you into KY‘s story .</p>
                </div>
                <div class="z-zi-fr-xia-fr"><router-link to="/watch2/about2">See more</router-link></div>
              </div>
            </div>
          </div>
        </div>
        <div class="z-company">
          <h3>OEM/ ODM Company</h3>
            <span>Focus on solution and services in the OEM/ ODM smart wearable industry .</span>
          <img src="@/assets/img/index_content_4.jpg" class="z-content_4" />
          <ul>
            <li v-for="val in list4" :key="val.id">
              <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
              <div>
                <span>{{val.english_name}}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="z-history">
           <h3>Explore KY's history</h3>
            <span>Explore the strength of KY brand with you</span>
          <div class="z-center">
            <div class="z-left">
              <div class="z-cont1" v-for="val in list5" :key="val.id">
                 <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                <span>{{val.name}}</span>
              </div>
              <div class="z-cont2" v-for="val in list6" :key="val.id">
               <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                <span>{{val.name}}</span>
              </div>
            </div>
            <div class="z-zhong">
              <div class="z-cont3" v-for="val in list7" :key="val.id">
                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                <span>{{val.name}}</span>
              </div>
              <div class="z-cont4" v-for="val in list8" :key="val.id">
                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                <span>{{val.name}}</span>
              </div>
            </div>
            <div class="z-right">
              <div class="z-cont5" v-for="val in list9" :key="val.id">
                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                <span>{{val.name}}</span>
              </div>
              <div class="cont6" v-for="val in list10" :key="val.id">
                <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
                <span>{{val.name}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="z-partners">
          <h3>Our partners</h3>
            <span>Do you want to open the door to wealth like them ?</span>
        </div>
      </div>
    </div>
   <div class="z-animation">
    <ul  class="z-login">
      <li v-for="val in list11" :key="val.id">
        <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
      </li>
    </ul>
    <ul  class="z-login">
      <li v-for="val in list11" :key="val.id">
        <img :src="'http://www.kymid.com/testphp/public'+ val.image" alt="">
      </li>
    </ul>
    </div>
  </div>
</template>

<script setup>
import 'swiper/swiper-bundle.css'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { ref, getCurrentInstance, onMounted } from 'vue'
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay
} from 'swiper'
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])
  const { proxy } = getCurrentInstance()
  const list = ref([])
  const list2 = ref([])
  const therr = ref([])
  const list3 = ref([])
  const list4 = ref([])
  const list5 = ref([])
  const list6 = ref([])
  const list7 = ref([])
  const list8 = ref([])
  const list9 = ref([])
  const list10 = ref([])
  const list11 = ref([])
  onMounted(() => {
    banner()
    banner2()
    banner3()
    banner4()
    banner5()
    banner6()
    banner7()
    banner8()
    banner9()
    banner10()
    banner11()
    banner12()
  })
  function banner () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/navlist?flag=0lang=en', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i >= 1) {
          return true
        }
        list.value.push(val)
      })
      console.log(list.value)
    })
  }
  function banner2 () {
     proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/navlist?flag=0', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 3) {
          therr.value.push(val)
          return true
        }
      })
    })
  }
  function banner3 () {
     proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/navlist?flag=0', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 2) {
          list2.value.push(val)
          return true
        }
      })
    })
  }
  function banner4 () {
     proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/navlist?flag=0', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 1) {
          list3.value.push(val)
          return true
        }
      })
    })
  }
  function banner5 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/customized', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i >= 4) {
          return true
        }
        list4.value.push(val)
      })
    })
  }
  function banner6 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/explore', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 5) {
          list5.value.push(val)
        }
      })
    })
  }
  function banner7 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/explore', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 2) {
          list6.value.push(val)
        }
      })
    })
  }
  function banner8 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/explore', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 4) {
          list7.value.push(val)
        }
      })
    })
  }
  function banner9 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/explore', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 1) {
          list8.value.push(val)
        }
      })
    })
  }
  function banner10 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/explore', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 3) {
          list9.value.push(val)
        }
      })
    })
  }
  function banner11 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/explore', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i === 0) {
          list10.value.push(val)
        }
      })
    })
  }
  function banner12 () {
    proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/partner', {
    }).then(val => {
      val.data.msg.forEach((val, i) => {
        if (i >= 6) {
            return true
        }
         list11.value.push(val)
      })
    })
  }
</script>
<style src="@/assets/css/index.css" scoped>

</style>
<style>
.swiper-pagination-bullet{
  width: 30px;
  height: 2px;
  background-color: #fff;
}
.z-cuff-fr-xia-tu{
  width: 450px;
  height: 300px;
}
.z-cuff-fr-xia-tu img{
  width: 100%;
  height: 100%;
}
.z-zi-fr a,
.z-zi-fr-fr a,
.z-zi-fr-xia-fr a{
  color: #fff;
}
.z-login li{
  margin-left: 18px;
}
body{
  overflow-x: hidden;
}
.z-animation{
  display: flex;
  box-sizing: border-box;
  animation: move 10s linear infinite;
  transition: all 0ms ease-in 0s;
}
.z-animation:hover{
  animation: paused;
}
.z-login{
  display: flex;
  margin-top: 20px;
}
@keyframes move{
    0%{
    transform: translate(-50%);
  }
  100% {
    transform: translate(0%);
  }
}
</style>
